<html>
<head>
<title>Google Spreadsheet Time Series graph example: embedding in a web page</title>
<style type="text/css"> 
body {
  font-family: sans-serif;
  font-size: 16px;
  margin: 50px;
}
</style>
</head>
<body>
<h1>Google Spreadsheet Time Series graph example</h1>
<h2>Embedding in a web page</h2>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js">
    {
        "chartType": "AnnotatedTimeLine",
        "chartName": "Chart 1",
        "dataSourceUrl": "//spreadsheets.google.com/tq?key=0AkI3tnLjudc3dExWSE1OVUJVeEpyeVpCYlF3dHFibVE&range=A1%3AB1441&gid=0&transpose=0&headers=1&pub=1",
        "options": {
            "displayAnnotations": true,
            "showTip": true,
            "dataMode": "markers",
            "maxAlternation": 1,
            "pointSize": "0",
            "colors": ["#3366CC", "#DC3912", "#FF9900", "#109618", 
                       "#990099", "#0099C6", "#DD4477", "#66AA00", "#B82E2E", "#316395"],
            "smoothLine": true,
            "lineWidth": "2",
            "labelPosition": "right",
            "is3D": false,
            "hasLabelsColumn": true,
            "wmode": "opaque",
            "allowCollapse": true,
            "isStacked": false,
            "mapType": "hybrid",
            "width": 600,
            "height": 371
        },
        "refreshInterval": 5
    }
</script>
<p>
(The graph above may take a few seconds to appear. It's plotting 1440 data points - one for each minute in 24 hours.)
</p>
<p>
Below is the code embedded in this page that displays the graph above. You get the code from a Google spreadsheet that
hosts the graph that. (You have to have edit permission to get the code.) Open the spreadsheed and click on the graph. 
A menu appears on the upper left corner of the graph. Choose the 'Publish chart...' item from the menu.
I've cut the code from dialog box and put it through a Javascript pretty printer to make it more understandable.
The chart has a lot of options, most of which are not offered in the Google Spreadsheet interface.
</p>
<pre>
&lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js">
    {
        "chartType": "AnnotatedTimeLine",
        "chartName": "Chart 1",
        "dataSourceUrl": "//spreadsheets.google.com/tq?key=0AkI3tnLjudc3dExWSE1OVUJVeEpyeVpCYlF3dHFibVE&range=A1%3AB1441&gid=0&transpose=0&headers=1&pub=1",
        "options": {
            "displayAnnotations": true,
            "showTip": true,
            "dataMode": "markers",
            "maxAlternation": 1,
            "pointSize": "0",
            "colors": ["#3366CC", "#DC3912", "#FF9900", "#109618", 
                       "#990099", "#0099C6", "#DD4477", "#66AA00", "#B82E2E", "#316395"],
            "smoothLine": true,
            "lineWidth": "2",
            "labelPosition": "right",
            "is3D": false,
            "hasLabelsColumn": true,
            "wmode": "opaque",
            "allowCollapse": true,
            "isStacked": false,
            "mapType": "hybrid",
            "width": 600,
            "height": 371
        },
        "refreshInterval": 5
    }
&lt;/script>
</pre>
<ul>
  <li>The spreadsheet url:</li><ul><li><a href="https://spreadsheets.google.com/ccc?key=0AkI3tnLjudc3dExWSE1OVUJVeEpyeVpCYlF3dHFibVE&amp;hl=en#gid=0">https://spreadsheets.google.com/ccc?key=0AkI3tnLjudc3dExWSE1OVUJVeEpyeVpCYlF3dHFibVE&amp;hl=en#gid=0</a>
  </li>
</ul>
<li>The data source url used in the code above:</li>
<ul><li><a href="http://spreadsheets.google.com/tq?key=0AkI3tnLjudc3dExWSE1OVUJVeEpyeVpCYlF3dHFibVE&amp;range=A1%3AB1441&amp;gid=0&amp;transpose=0&amp;headers=1&amp;pub=1">http://spreadsheets.google.com/tq?key=0AkI3tnLjudc3dExWSE1OVUJVeEpyeVpCYlF3dHFibVE&amp;range=A1%3AB1441&amp;gid=0&amp;transpose=0&amp;headers=1&amp;pub=1</a></li></ul>
<li>The url used in the spreadsheet to get the CSV data:</li><ul><li><a href="http://grideyeq.com/data/demoi.csv.php?id=1&amp;span=r&amp;var=0016&amp;foo=3134">http://grideyeq.com/data/demoi.csv.php?id=1&amp;span=r&amp;var=0016&amp;foo=3134</a></li>
</ul>
<li>The spreadsheet function used to bring the data into the spreadsheet:</li>
<ul>
<li><span class="Apple-style-span" style="font-family: arial, sans, sans-serif; white-space: pre; ">=ImportData(CONCATENATE("http://grideyeq.com/data/demoi.csv.php?id=1&amp;span=r&amp;var=0016&amp;foo=",FIXED(MINUTE(NOW()))))</span></li>
<li><span class="Apple-style-span" style="font-family: arial, sans, sans-serif; white-space: pre; ">The </span><span class="Apple-style-span" style="font-family: arial, sans, sans-serif; white-space: pre; ">FIXED(MINUTE(NOW()) concatenated on the url is to make sure it gets a new copy of the data. I don't know if it's needed.</span></li>
</ul></ul>
</body>
